<template>
  <div>
    <!-- <div class="box">22222222
        <input type="text" name="" placeholder="文本框" class="layui-input">
        <div class="aa">11111111111</div>
      </div> -->
    <div class="box">
       
      <div class="logins"> 
        <span>登录</span>
        <input type="text" name="" v-model="data.phone" placeholder="请输入账号" class="layui-input" />
        <input type="password" name="" v-model="data.password" placeholder="请输入密码" class="layui-input " />

       
        <button type="button" @click="methods.logins()" class="layui-btn layui-btn-normal  layui-btn layui-btn-fluid">登录</button>

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from "@/stores/counter";
import { reactive, ref, watchEffect } from "vue";
import { useRouter } from "vue-router";
interface PageData {
  name: string;
  phone: number;
  password?: string | number;
}
const data = reactive<PageData>({
  name: "登录页面",
  phone: 16651737795,
  password: 123456,
});

const router=useRouter();
const users = ref<string>("");

const stores = useCounterStore();
const methods = {
  logins: () => {
    const {phone,password}=data;
    stores.token.setToken({phone,password});
    router.push("/")
  },
  loginOut: () => {
    stores.token.removeToken();
  },
};

watchEffect(() => {
  users.value = stores.token.getToken();
});
</script>



<style lang="scss">
// .box{
//     width: 100vw;
//     height: 100vh;
//     background:#000;
//     color: $color-green;
//     .aa{
//         width: 100px;
//         height: 100px;
//         margin-top: 10px;
//         background: red;
//         color: $color-green;
//     }
// }
.box {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/meituan.jpg") no-repeat center center;
  background-size: 100% 100%;
  overflow: hidden;
  box-sizing: border-box;
  .logins {
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    text-align: center;
    padding: 10px;
    border-radius: 5px;
    width: 24rem;
    height: 25rem;
    background: #ffffff;

    span:nth-child(1){
        font-size: 30px;
        font-weight: bold;
    }

    button{
        margin-top:2rem ;
    }
  }

 

  input {
    padding: 10px;
    margin-top: 20px;
  }

  
}
</style>

